import React from 'react';
import { Modal, Form, Input, message, Button, Row, Col, Popconfirm } from 'antd';
import { FormInstance } from 'antd/lib/form';

const FormItem = Form.Item;
let options: any = [];

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

const TboxBindingForm = React.forwardRef((props, ref) => {
  const {
    visible,
    titleType,
    onCancel,
    handleSimCreate,
    handleVinCreate,
    handleSubmit,
    confirmType,
    originSim,
    originVin,
    setSim,
    setVin,
    setConfirmType,
  } = props;

  return (
    <Modal
      visible={visible}
      title={titleType}
      onCancel={onCancel}
      handleSimCreate={handleSimCreate}
      handleVinCreate={handleVinCreate}
      options={options}
      confirmType={confirmType}
      originSim={originSim}
      originVin={originVin}
      footer={[
        <Button key="back" type="primary" size="default" onClick={onCancel}>
          返回
        </Button>,
      ]}
    >
      <Form onSubmit={handleSubmit} ref={ref}>
        <FormItem
          {...formItemLayout}
          label="T-BOX编号"
          name="deviceId"
          rules={[{ required: true, message: 'T-BOX编号' }]}
        >
          <Input placeholder="请输入T-BOX编号" maxLength={20} disabled />
        </FormItem>

        <FormItem {...formItemLayout} label="VIN号">
          <Row gutter={8}>
            <Col span={20}>
              <FormItem name="vin" noStyle rules={[{ required: false, message: '请输入VIN号' }]}>
                <Input
                  placeholder="为空则解除原有绑定"
                  onChange={e => {
                    const v = e.target.value;
                    setVin(v);
                    if (!originVin) {
                      if (v.trim()) {
                        confirmType[0] = '确定要绑定该VIN号吗?';
                      } else {
                        confirmType[0] = '';
                      }
                    } else if (v && originVin !== v) {
                      confirmType[0] = '确定要绑定该VIN号吗?';
                    } else if (v && originVin === v) {
                      confirmType[0] = '';
                    } else {
                      confirmType[0] = '确定解除与该VIN号的绑定吗?';
                    }
                    setConfirmType(confirmType);
                  }}
                />
              </FormItem>
            </Col>
            <Col span={4}>
              <Popconfirm title={confirmType[0]} onConfirm={handleVinCreate}>
                <Button type="primary" size="default" disabled={confirmType[0] === ''}>
                  修改
                </Button>
              </Popconfirm>
            </Col>
          </Row>
        </FormItem>

        <FormItem {...formItemLayout} label="SIM卡号">
          <Row gutter={8}>
            <Col span={20}>
              <FormItem name="sim" noStyle rules={[{ required: false, message: '请输入SIM号' }]}>
                <Input
                  placeholder="为空则解除原有绑定"
                  onChange={e => {
                    const v = e.target.value;
                    setSim(v);
                    if (!originSim) {
                      if (v.trim()) {
                        confirmType[1] = '确定要绑定该SIM卡号吗?';
                      } else {
                        confirmType[1] = '';
                      }
                    } else if (v && originSim !== v) {
                      confirmType[1] = '确定要绑定该SIM卡号吗?';
                    } else if (v && originSim === v) {
                      confirmType[1] = '';
                    } else {
                      confirmType[1] = '确定解除与该SIM卡的绑定吗?';
                    }
                    setConfirmType(confirmType);
                  }}
                />
              </FormItem>
            </Col>
            <Col span={4}>
              <Popconfirm title={confirmType[1]} onConfirm={handleSimCreate}>
                <Button type="primary" size="default" disabled={confirmType[1] === ''}>
                  修改
                </Button>
              </Popconfirm>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </Modal>
  );
});

class tboxBindingModel extends React.PureComponent {
  formRef = React.createRef<FormInstance>();
  state = {
    visible: false,
    titleType: '',
    origin_vin: '',
    modify_vin: '',
    origin_sim: '',
    modify_sim: '',
    deviceId: '',
    confirmType: ['', ''],
    page: '',
    formValues: '',
  };

  componentWillMount() {}

  componentDidMount() {
    this.props.onRef(this);
  }

  showModalEdit = async (e: any) => {
    await this.setState({
      titleType: '修改绑定关系',
      visible: true,
    });
    this.formRef.current.setFieldsValue({
      deviceId: e.deviceId,
      sim: e.sim,
      vin: e.vin,
    });
    this.setState({
      origin_vin: e.vin,
      modify_vin: e.vin,
      origin_sim: e.sim,
      modify_sim: e.sim,
      deviceId: e.deviceId,
      confirmType: ['', ''],
      page: e.page,
      formValues: e.formValues,
    });
  };
  handleCancel = () => {
    const { page, formValues } = this.state;
    const { dispatch } = this.props;
    this.formRef.current.resetFields();
    dispatch({
      type: 'tbox1/getFetchPage',
      payload: {
        url: '/tbox/list',
        page: page.current - 1,
        size: page.pageSize,
        ...formValues,
      },
    });
    options = [];
    this.setState({ visible: false });
  };

  handleSimCreate = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'tbox1/postObjWithRes',
      payload: {
        url: '/tbox/bindingsim',
        deviceId: this.state.deviceId,
        originSim: this.state.origin_sim,
        sim: this.state.modify_sim,
      },
      callback: (data: any) => {
        if (data.statusCode === '0') {
          message.success('操作成功').then(() => {});
          this.setState({
            origin_sim: this.state.modify_sim,
            confirmType: [this.state.confirmType[0], ''],
          });
        }
      },
    });
  };
  handleVinCreate = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'tbox1/postObjWithRes',
      payload: {
        url: '/tbox/bindingvin',
        deviceId: this.state.deviceId,
        originVin: this.state.origin_vin,
        vin: this.state.modify_vin,
      },
      callback: (data: any) => {
        if (data.statusCode === '0') {
          message.success('操作成功').then(() => {});
          this.setState({
            origin_vin: this.state.modify_vin,
            confirmType: ['', this.state.confirmType[1]],
          });
        }
      },
    });
  };

  render() {
    return (
      <div>
        <TboxBindingForm
          ref={this.formRef}
          visible={this.state.visible}
          titleType={this.state.titleType}
          onCancel={this.handleCancel}
          handleVinCreate={this.handleVinCreate}
          handleSimCreate={this.handleSimCreate}
          handleSubmit={this.handleSubmit}
          confirmType={this.state.confirmType}
          originVin={this.state.origin_vin}
          originSim={this.state.origin_sim}
          setSim={(sim: any) => this.setState({ modify_sim: sim })}
          setVin={(vin: any) => this.setState({ modify_vin: vin })}
          setConfirmType={(newType: any) => this.setState({ confirmType: newType })}
        />
      </div>
    );
  }
}

export default tboxBindingModel;
